<template>
  <el-dialog
    :title="formData._id ? '修改资金信息' : '添加资金信息'"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :visible.sync="dialogIsShow"
  >
    <el-form ref="form" :model="formData" label-width="120px" :rules="rules">
      <el-form-item prop="type" label="收支类型">
        <el-select v-model="formData.type" placeholder="收支类型">
          <el-option
            v-for="(formtype,index) in format_type_list"
            :label="formtype"
            :key="index"
            :value="formtype"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="describe" label="收支描述">
        <el-input v-model="formData.describe" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="income" label="收入">
        <el-input v-model="formData.income" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="expend" label="支出">
        <el-input v-model="formData.expend" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="cash" label="账户现金">
        <el-input v-model="formData.cash" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-input v-model="formData.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('form')">{{formData._id ? '修改' : '添加'}}</el-button>
        <el-button @click="dialogIsShow = false;">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import {reqAddProfile,reqEditProfile} from '../api'
export default {
  props: {
      formData:Object
  },
  data() {
    return {
      dialogIsShow:false,
      
      format_type_list: [
        "提现",
        "提现手续费",
        "充值",
        "优惠券",
        "充值礼券",
        "转账"
      ],
      rules: {
        type: [
          { required: true, message: "请选择收支类型", trigger: "change" }
        ],
        describe: [{ required: true, message: "收支描述", trigger: "blur" }],
        income: [{ required: true, message: "收入", trigger: "blur" }],
        expend: [{ required: true, message: "支出", trigger: "blur" }],
        cash: [{ required: true, message: "账户现金", trigger: "blur" }],
        remark: [{ required: true, message: "备注", trigger: "blur" }]
      }
    };
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
    
          this.formData._id ? this.updateProfile() : this.addProfile();
          
        }
      });
    },
    addProfile(){
        console.log('addProfile')

        reqAddProfile(this.formData).then(res => {
              console.log(res)
          
          this.$message({
              type:'success',
              message:'添加成功'
          })  
          this.dialogIsShow = false;

          /**
           * 
           * 使用emit 让子组件去触发父组件中的一个方法,
           * 这个方法中写的就是请求接口的方法,子组件再触发他一次再发一次请求就可以了
            */ 
          this.$emit('update')
          })
    },
    updateProfile(){
        console.log('updateProfile')
        reqEditProfile(this.formData).then(res => {
              console.log(res)
          
          this.$message({
              type:'success',
              message:'修改成功'
          })  
          this.dialogIsShow = false;

          /**
           * 
           * 使用emit 让子组件去触发父组件中的一个方法,
           * 这个方法中写的就是请求接口的方法,子组件再触发他一次再发一次请求就可以了
            */ 
          this.$emit('update')

          })
    },
  },
  components: {}
};
</script>

<style scoped >
</style>
